<template>
  <div class="qsslect-container">
<el-form :model="questionForm" :rules="rules" ref="questionForm" label-width="100px" class="demo-questionForm">
  <el-form-item label="分类" required  style="display: inline-block; width: 20%;" class="question-types select">
    <el-col :span="5" class="question">
      <el-form-item>        
        
        .

      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="题型" required  style="display: inline-block; width: 20%;" class="question-types select">
    <el-col :span="5" class="question">
      <el-form-item>
        <el-select v-model="questionForm.classify" placeholder="请选择题型">
          <el-option label="全部题型" value=""></el-option>
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form-item>
  <!-- <el-form-item label="标签"  style="display: inline-block; width: 20%; margin-left: -30px;" class="question-types">
    <el-col :span="5" class="tag">
      <el-form-item prop="">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-form-item> -->
  <el-form-item label="关键词"  style="display: inline-block; width: 20%; margin-left: -20px;" class="question-types">
    <el-col :span="5" class="tag">
      <el-form-item>
        <el-input v-model="questionForm.question"></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>
    <el-button type="primary" class="search" @click="getQuestionList()" :loading="btnLoading">查询</el-button>
</el-form>
<div class="table">    
    <el-container>
        <el-main>
            <el-table
                v-loading="tableLoading"
                element-loading-text="请给我点时间！"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-key="getRowKeys"
                >
                <el-table-column prop="id" type="selection" width="55" :reserve-selection="true"></el-table-column>
                <el-table-column type="index" label="序号" width="100"></el-table-column>
                <el-table-column prop="question" label="题目" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify" label="题型" width="100"></el-table-column>
                <el-table-column prop="examType.typeName" label="分类" width="100"></el-table-column>
            </el-table>
                </el-main>  
            </el-container>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"                
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="pageTotal"
                style="margin-top: 20px;">
            </el-pagination>
    </div>
  </div>
</template>
<script>
import { fetchTree, fetchDel, fetchAdd } from '@/api/profession'
import { fetchList, fetchQuestionIdList } from '@/api/question'
import { isvalidateRequired } from '@/utils/validate'
import { Message } from 'element-ui'
import Bus from '@/utils/bus'

export default {
  data() {
    return {
      options: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 10,
      pageTotal: 100,
      treeId: '',
      questionForm: {
        id: '',
        typeList: [],
        classify: '',
        question: ''
      },
      tableData: [],
      tableDataRows: [],
      multipleSelection: [],
      ChangeState: 0,
      getRowKeys(row) {
        return row.id
      },
      editId: '',
      editQuestionIds: []
    }
  },
  created() {
    this.getQuestionList()
    this.getTree()
  },
  mounted() {
    // 监听添加页面通讯驱动 得到新增的题目
    Bus.$on('viewAddToViewSelect', text => {
      console.log('1')
      this.questionForm.typeList = []
      this.treeId = ''
      this.currentPage = 1
      this.questionForm.question = ''
      this.getQuestionList().then(response => {
        this.$refs.multipleTable.toggleRowSelection(this.tableData[0])
      })
    })
    // 监听表单页面通讯驱动 得到修改ID
    Bus.$on('viewFormToViewSelect', text => {
      console.log('2')
      console.log(this.tableData[0])
      this.$refs.multipleTable.toggleRowSelection(this.tableData[0])
      this.editId = text
      var q = 0
      fetchQuestionIdList(text).then(response => {
        this.editQuestionIds = response.data.data
        for (var i = 0; i < this.tableData.length; i++) {
          for (var j = 0; j < this.editQuestionIds.length; j++) {
            if (this.tableData[i].id === this.editQuestionIds[j].id) {
              // this.$refs.multipleTable.toggleRowSelection(this.tableData[0])
            }
            q++
          }
        }
      })
      console.log('q:' + q)
    })
  },
  methods: {
    getQuestionList() {
      this.tableLoading = true
      if (this.questionForm.typeList.length > 0) {
        this.treeId = this.questionForm.typeList[this.questionForm.typeList.length - 1]
      }
      return fetchList(
        this.treeId,
        this.currentPage,
        this.pageSize,
        this.questionForm.question
      ).then(response => {
        this.pageTotal = response.data.total
        this.tableData = response.data.data
        this.tableLoading = false
      })
    },
    getTree() {
      fetchTree().then(response => {
        this.options = response.data.data
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getQuestionList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getQuestionList()
    },
    handleSelectionChange(val) {
      this.$emit('listenToViewSelect', val)
      this.multipleSelection = val
    }
  }
}
</script>
<style scoped>
.qsslect-container .el-form {
    text-align: left;
}
.question-types>>>.el-form-item__label {
  width: 60px !important;
}
.question-types>>>.el-form-item__content {
  margin-left: 0px !important;
}
.question,
.tag {
  width: 60%;
}
.search {
  vertical-align: top;
}
.table>div {
 text-align: left;
 line-height: 24px;
 margin-top: -20px;
}
.table .el-checkbox {
    padding: 0 14px;
}
.table span {
    margin: 0 30px;
}
.table>>>.el-select>.el-input{
    width: 80px;
}
.el-main {
  color: #333;
  text-align: left;
  border-bottom: 0;
  padding: 0;
}
.table .page {
 margin-top: 20px;
 text-align: center;
}
.el-pagination {
    display: inline-block;
}
.save {
 margin-top: 20px; 
}
.save .search {
 width: 120px;
}
</style>
